<template>
  <div class='container'>
    <el-dialog
      width='25%'
      :title="showText"
      :visible="showCatalogue"
      @close="btnCancel"
    >
      <!-- 表单-->
      <el-form
        :rules="rules"
        ref="permForm"
        :model="addForm"
        label-width="90px"
      >
        <el-form-item
          prop="subjectID"
          label="所属学科"
        >
          <!-- @change="changesubjectID" -->
          <el-select
            style="width:90%"
            v-model="addForm.subjectID"
            placeholder="选择学科"
          >
            <el-option
              v-for="item in peoples"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="directoryName"
          label="目录名称"
        >
          <el-input
            v-model="addForm.directoryName"
            style="width:90%"
          />
        </el-form-item>
      </el-form>
      <el-row
        slot="footer"
        type="flex"
        justify="center"
      >
        <!-- 1列被分为24 -->
        <el-col :span="12">
          <!-- size="small"组件代的样式 -->
          <!-- @click="btnCancel" -->
          <el-button
            size="small"
            @click="btnCancel"
          >取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="btnOk"
          >确定</el-button>

        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail, update, add } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys-add',
  // 组件参数 接收来自父组件的数据
  props: {
    showCatalogue: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      peoples: [],
      addForm: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }],
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      catalogueId: null
    }
  },
  computed: {
    showText () {
      return this.catalogueId ? '编辑' : '新增'
    }
  },
  created () {
    this.simple()
    this.edit()
  },
  methods: {
    // 获取学科简单列表数据
    async simple () {
      const { data } = await simple()
      this.peoples = data
      console.log(data)
    },
    // 打印下拉学科表单的id
    // changesubjectID () {
    //   console.log(this.addForm.subjectName)
    // },
    async edit (id) {
      this.catalogueId = id
      const data = await detail({ id: this.catalogueId })
      // console.log(data)
      this.addForm = data.data
    },
    // 确定
    async btnOk () {
      // console.log(this.catalogueId)
      try {
        await this.$refs.permForm.validate()
        // 是否有id
        if (this.catalogueId) {
          // this.addForm.subjectID = this.catalogueId
          // 修改目录
          await update(this.addForm)
          this.$emit('update')
          this.$emit('update:showCatalogue', false)
          this.$message.success('修改成功')
        } else {
          // 没有id就是新增
          await add(this.addForm)
          this.$emit('update')
          this.$emit('update:showCatalogue', false)
          this.$message.success('添加成功')
        }
      } catch (error) {
        console.log(error)
        this.$message.success('操作失败')
      }
    },
    btnCancel () {
      this.addForm = {
        subjectID: '',
        directoryName: ''
      }
      // 重置表单校验结果
      this.$refs.permForm.resetFields()
      // 利用.sync 修饰符 关闭弹层
      this.$emit('update:showCatalogue', false)
    },
    btnDelet () {
      this.addForm = {
        subjectID: '',
        directoryName: ''
      }
    }
  }
}
</script>

<style scoped lang='scss'></style>
